<template>
  <div>
    <el-header>
      <div class="user-introduce">
        <h1>选课人员名单</h1>
      </div>
    </el-header>
    <div v-if="dataShowType=='grid'"  class="project-grid-container">
      <div v-if="userList.length"
           v-loading="userListLoading"
           class="project-grid-view">
        <div v-for="user in userList" :key="user.id" class="project-grid-item-view pointer">
          <el-row type="flex" align="middle" justify="center">
            <el-col :span="5">
              <span
                class="project-grid-view-status"
              />
            </el-col>
            <el-col :span="19">
              <el-tooltip :content="user.userName" placement="top">
                <p class="project-title">
                    姓名:  {{ user.userName}}
                </p>
              </el-tooltip>
            </el-col>
          </el-row>
          <img class="project-grid-view-preimg"
               :src="user.avater"
          >
          <p class="project-grid-view-time">{{ user.email }}</p>

        </div>
        <div class="project-page-view">
          <el-pagination
            v-if="total>10"
            background
            :page-size.sync="queryParams.size"
            :current-page.sync="queryParams.pageNum"
            layout="total, prev, pager, next"
            :total="total"
            @current-change="getCourseUser"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { selectUsersList} from "@/api/evaluation/course";
export default {
  name: "detail.vue",
  data() {
    return {
      courseUser:{
        courseId : 1,
        userId : ''
      },
      courseId: this.$route.query.courseId,
      dataShowType: 'grid',
      userList: [11,1],
      total: 0,
      userListLoading: true,
      queryParams: {
        pageNum: 1,
        size: 10,
        projectName: '',
        beginDateTime: null,
        endDateTime: null,
        status: null
      }
    }
  },
  created() {
    this.getCourseUser()
  },
  methods: {
    getCourseUser() {
      this.courseUser.courseId = this.courseId
      console.log(this.courseUser)
      selectUsersList(this.courseUser).then(response => {
        this.userList= response.data;
        this.total =response.data.length;
        this.userListLoading = false
        console.log(response.data)
      })
    }

  }
}


</script>

<style scoped>
.project-grid-container {
  margin-top: 20px;
  display: flex;
  width: 100%;
  justify-content: center;
}
.project-grid-view {
  display: flex;
  width: 950px;
  flex-direction: row;
  flex-wrap: wrap;
}
.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
  margin: 10px;
  position: relative;
}
.project-grid-view-preimg {
  width: 143px;
  height: 121px;
}
.project-title {
  margin: 14px -20px;
  color: rgba(16, 16, 16, 100);
  font-size: 13px;
  text-align: left;
  line-height: 20px;
  max-height: 20px;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-grid-item-view {
  width: 169px;
  height: 199px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 100);
  text-align: center;
  box-shadow: 0 3px 6px 3px rgba(0, 0, 0, 0.12);
  margin: 10px;
  position: relative;
}
.user-introduce{
  height: 60px;
  text-align: center;
}
h1 {
  transform: translateY(50%);
}
.project-grid-view-time {
  color: rgba(144, 147, 153, 100);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  margin: 0;
}
</style>
